<template>
  <div class="checkboxContainer">
    <el-checkbox :label="checkboxIndex" name="options">{{checkboxItem.code+':'}}</el-checkbox>
    <el-input v-model="checkboxItem.title"></el-input>
    <!-- 上传图片 -->
    <el-upload action="#" list-type="picture-card" :auto-upload="false" id="uploadInput">
      <i class="el-icon-circle-close"></i>
      <span>上传图片</span>
      <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="checkboxItem.img" alt />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
            <i class="el-icon-download"></i>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <!-- /上传图片 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CheckboxOption",
  data () {
    return {
      //上传图片
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
    }
  },
  props: {
    checkboxItem: {
      type: Object,
      required: true
    },
    checkboxIndex: {
      type: Number,
      required: true
    },
    checkOptions: {
      type: Array,
      default: []
    }
  },
  methods: {
    //上传图片方法
    handleRemove (file) {
      console.log(file);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload (file) {
      console.log(file);
    }
  }

}
</script>

<style scoped>
.checkboxContainer {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
::v-deep.radioContainer > .el-radio .item {
  margin-right: 7px;
}
.optionItem #uploadInput .el-upload--picture-card {
  position: relative;
  width: 100px;
  height: 60px !important;
  line-height: 60px;
  vertical-align: middle;
  margin-left: 5px;
  font-size: 14px;
  color: #606266;
}
.el-icon-circle-close {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  background: #fff;
  font-size: 18px !important;
  color: #999 !important;
}
</style>